<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xf="http://www.w3.org/2002/xforms">
	<head>
		<style type="text/css">
     @namespace xf url("http://www.w3.org/2002/xforms");
     
    * { font-family: Ariel, Helvetica, sans-serif }
    
    .Person, xf|repeat {
		display: table;
		border: solid black 1px;
    }
    
/* the labels are right-aligned in a 150px wide column */
xf|input xf|label {
   width: 150px;
   margin: 3px;
   text-align: right;
}

/* the input values are left aligned */
xf|value {
   text-align: left;
}

/* vertical area between input boxes */
input {
   margin: .2em;        
}

/* each group is our table *.
xf|repeat {
   display: table;
}

/* each input is a row in the group table */
xf|input {
   display: table-row;
}

/* each label within an input is a cell in the input row */
xf|input xf|label {
   display: table-cell; 
}

/* each value (pseudo-element) is also a cell in the input row */
xf|input::value {
   display: table-cell;
}
    </style>
		<title>Demonstration of inserting and deleting records from a table</title>
		<xf:model id="phone-list">
			<xf:instance id="my-phone-list" src="phone-list.xml" xmlns="" />
			<xf:submission id="update-from-local-file" method="get" action="phone-list.xml" replace="instance" instance="my-phone-list" />
			<xf:submission id="view-xml-instance" method="get" action="phone-list.xml" />
			<xf:submission id="save-to-local-file" method="put" action="phone-list.xml" />
		</xf:model>
	</head>
	<body>
		<!-- For each Person in the PersonList display the name and phone-->
		<xf:group nodeset="/PhoneList">
			<xf:repeat nodeset="Person" id="repeatPerson">
			<div class="Person">
				<xf:input id="name-input" ref="Name">
					<xf:label>Name:</xf:label>
				</xf:input>
				<br />
				<xf:input ref="Phone">
					<xf:label>Phone:</xf:label>
				</xf:input>
				</div>
			</xf:repeat>
			<xf:trigger id="insertbutton">
				<xf:label>Add Person</xf:label>
				<xf:action ev:event="DOMActivate">
					<xf:insert nodeset="/PhoneList/Person[last()]" position="after" at="last()" />
					<xf:setvalue ref="/PhoneList/Person[last()]/Name" value="''" />
					<xf:setvalue ref="/PhoneList/Person[last()]/Phone" value="''" />
					<xf:setfocus control="name-input" />
				</xf:action>
			</xf:trigger>
			<xf:trigger id="delete">
				<xf:label>Delete Person</xf:label>
				<xf:delete nodeset="/PhoneList/Person[index('repeatPerson')]" at="index('repeatPerson')" ev:event="DOMActivate" />
			</xf:trigger>
			<br />
			<xf:submit submission="update-from-local-file">
				<xf:label>Reload</xf:label>
			</xf:submit>
			<xf:submit submission="save-to-local-file">
				<xf:label>Save</xf:label>
			</xf:submit>
			<xf:submit submission="view-xml-instance">
				<xf:label>View XML Instance</xf:label>
			</xf:submit>
		</xf:group>
	</body>
</html>
